<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    scroll
    :max-height="'700px'"
    align-center
    width="65%"
  >
    <TenantList
      :type="'component'"
      :select-tenant-list="selectTenantList"
      :-tenant-id="tenantId"
      :multiple="true"
      @select-tenants="selectTenant"
    />
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'TenantSelectDialog' })

const TenantList = defineAsyncComponent(() => import('./tenantList.vue'))

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('关联商户选择') // 弹窗的标题
const selectTenantList = ref() //选择的门店列表
const tenantId = ref()
const open = async (id: any, tenantList?: any[]) => {
  tenantId.value = id
  dialogVisible.value = true
  dialogTitle.value = '关联商户选择'
  resetForm()
  selectTenantList.value = tenantList
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 使用选中的关联商户 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const selectTenant = (tenantList: any) => {
  selectTenantList.value = tenantList.value
  emit('success', selectTenantList.value)
  dialogVisible.value = false
}
/** 重置表单 */
const resetForm = () => {
  selectTenantList.value = []
}
</script>
